<%--
  Created by IntelliJ IDEA.
  User: 世界上最帅的詹姆斯
  Date: 2021-01-18
  Time: 10:40
  To change this template use File | Settings | File Templates.
--%>
<%--
  Created by IntelliJ IDEA.
  User: 世界上最帅的詹姆斯
  Date: 2021-01-18
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="<%=basePath%>join/css/style.css" rel="stylesheet" type="text/css">
    <link href="<%=basePath%>join/css/nice-select.css" rel="stylesheet" type="text/css">
    <style type="text/css"></style>
</head>
<link type="text/css" rel="stylesheet" href="<%=basePath%>page/layui/css/layui.css">
<body class="layui-layout-body" style="background: #f7f7f7;overflow: scroll">
<div class="layui-layout layui-layout-admin" >
    <div class="layui-header" style="z-index:1;width: 100%;height:525px;background: url('../static/images/bg_3.jpg')">
        <div class="layui-logo" style="font-size: 18px;color: #666666">小姜姜国际酒店</div>
        <ul class="layui-nav" style="background:#ffffff;opacity: 0.7;position: relative;height: 70px">
            <li class="layui-nav-item" style="position: relative;left: 250px"><img
                    src="<%=basePath%>static/images/tt_luxury.png" style="width: 180px;height: 70px"></li>
            <li class="layui-nav-item" style="position: relative;left: 300px;"><a href="<%=basePath%>join/index.html" style="color: #333333">首页</a></li>
            <li class="layui-nav-item" style="position: relative;left: 300px;color: #333333"><a href="<%=basePath%>index/aboutus.html" style="color: #333333">关于品牌</a>
                <dl class="layui-nav-child" style="color: #333333">
                    <dd><a href="<%=basePath%>index/aboutus.html">">关于我们</a></dd>
                    <dd><a href="<%=basePath%>index/aboutus.html">">品牌背景</a></dd>
                    <dd><a href="<%=basePath%>index/aboutus.html">">品牌CEO</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item " style="position: relative;left: 300px;color: #333333"><a href="<%=basePath%>page/login/login.jsp" style="color: #333333">用户登录</a></li>
            <li class="layui-nav-item" style="position: relative;left: 300px;color: #333333"><a href="<%=basePath%>page/register/register.jsp" style="color: #333333">用户注册</a></li>
            <li class="layui-nav-item " style="position: relative;left: 300px;color: #333333">
                <a href="<%=basePath%>user/loginMyorder" style="color: #333333">我的订单</a>
            </li>
            <li class="layui-nav-item layui-this " style="position: relative;left: 300px;color: #333333"><a style="color: #333333" href="BookList">预订酒店</a></li>
            <li class="layui-nav-item" lay-unselect="" style="position: relative;left: 600px ;color: #333333">
                <a href="javascript:;" style="color: #333333"><i class="layui-icon" style="color: #333333">&#xe678;</i>&nbsp;${user.realName}</a>
                <dl class="layui-nav-child" style="color: #333333;z-index:20;">
                    <dd><a href="<%=basePath%>user/Info">修改信息</a></dd>
                    <dd><a href="<%=basePath%>page/user/changePwd.jsp">安全管理</a></dd>
                    <dd><a href="<%=basePath%>user/logOut">退了</a></dd>
                </dl>
            </li>
        </ul>

<div class="layui-row" style="background: white;position: relative;top: 50px;width: 1140px;left: 180px;height: 300px">
    <div class="layui-col-md4" style="top: 20px;left: 60px">
        <div class="grid-demo grid-demo-bg1" >
            <div class="layui-carousel" id="test1">
                <div carousel-item >
                    <div><img src="<%=basePath%>images/bj_1111.jpg" style="width: 400px;height: 300px"></div>
                    <div><img src="<%=basePath%>images/bj_1112.jpg" style="width: 400px;height: 300px"></div>
                    <div><img src="<%=basePath%>images/danren.png" style="width: 400px;height: 300px"></div>
                    <div><img src="<%=basePath%>images/sanren.jpg" style="width: 400px;height: 300px"></div>
                    <div><img src="<%=basePath%>images/shuangren.jpg" style="width: 400px;height: 300px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4" style="left:100px;top: 30px;">
        <div class="grid-demo">
            <h2>小姜姜国际酒店</h2>
            <br>
            <P>地址:湖南涉外经济学院</P>

            <p>电话:111111111</p>
            <hr>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">酒店简介</h3>

                <p>
                    小姜姜的国际酒店的一切准备工作似乎都已到位。发布之弦，一触即发。
                    <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                    <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                </p>
            </div>
        </div>
    </div>

</div>
<div style="color: #ffffff;width: 1223px;height: 500px;margin: 100px 150px">
    <div class="layui-form" >
        <div class="layui-form-item" style="position:relative;top:-20px;width: 1140px;height: 70px;line-height:70px;margin: 20px 32.5px ;background: white" align="left">
            <div class="layui-inline">
                <label class="layui-form-label">入住日期</label>

                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test1-2" placeholder="">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">离店日期</label>

                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test1-1" placeholder="yyyy-MM-dd">
                </div>
            </div>
            <div class="layui-inline"><label class="layui-form-label" id="howTime" style="font-size: 15px;position: relative;left: -30px">共1晚</label>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal" onclick="getTime()">确认修改</button>
            </div>
        </div>
    </div>
    <div class="room-title"
         style="position:relative;top:-40px;left:-2.5px;width: 1140px;margin: 0 35px;background-color: #94c9ff;color: #fff;height: 30px;line-height: 30px">
        <span class="room-title-filst ng-binding"
              style="padding-left: 80px; width: 400px;display: inline-block;">房型</span>
        <span class="ng-binding" style="display: inline-block;width: 125px">早餐</span>
        <span class="ng-binding" style="display: inline-block;width: 125px">取消政策</span>
        <span class="ng-binding" style="display: inline-block;width: 125px">人数上限</span>
        <span class="ng-binding" style="display: inline-block;width: 125px">房价</span>
    </div>
    <div class="room-list" style="position: relative;top: -39px;left: -2.5px">
        <ul class="ng-scope" id="table-Room">
        </ul>
        <br>
        <br>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"
             style="background: #ffffff;width: 1145px;height: 500px;position: relative;left: 35px">
            <ul class="layui-tab-title" style="background: #5babfc">
                <li class="layui-this" >酒店信息</li>
                <li>酒店政策</li>
                <li>酒店设施</li>
                <li>酒店服务</li>
                <li>酒店评论</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <h4 style="color: skyblue;font-size: 20px">酒店信息</h4>
                    <p style="color: #333333;font-size: 15px"><b>入住时间：</b>12点后</p>
                    <p style="color: #333333;font-size: 15px"><b>退房时间：</b>12点前</p>
                    <p style="color: #333333;font-size: 15px"><b>酒店介绍：</b></p>
                        <p style="color: #333333;font-size: 15px">暂无介绍</p>
                </div>
                <div class="layui-tab-item">
                    <h4 style="color: skyblue;font-size: 20px">酒店政策</h4>
                    <p style="color: #333333;font-size: 15px">暂无介绍</p>
                </div>
                <div class="layui-tab-item">
                    <h4 style="color: skyblue;font-size: 20px">酒店设施</h4>
                    <p style="color: #333333;font-size: 15px">暂无介绍</p>
                </div>
                <div class="layui-tab-item">
                    <h4 style="color: skyblue;font-size: 20px">酒店服务</h4>
                    <p style="color: #333333;font-size: 15px">暂无介绍</p>
                </div>
                <div class="layui-tab-item" style="position: relative">
                    <h4 style="color: skyblue;font-size: 20px;position:relative;left: 80px">用户评论</h4>
                    <div class="review-show" style="color: #333333;width: 1148px;height: 124px;line-height: 124px;position: relative;left: 80px" align="left" >
                        <div class="review-star" style="display: inline-block;width: 127px" >
                            <p class="score ng-binding">4.4 <b>/5分</b></p>
                            <P  class="ng-binding">真实评论</P>
                        </div>
                        <div class="comment-box"  style="display: inline-block">
                            <div class="comment-main " style="display: inline-block;position: relative">
                                <span style="position: relative;top: -30px;">服务态度</span>
                                <div id="test5"style="position: relative ;left: -80px"></div>
                            </div>
                            <div class="comment-main "  style="display: inline-block; position: relative">
                                <span style="position: relative;top: -30px;" >设备设施</span>
                                <div id="test6" style="position: relative ;left: -80px"></div>
                            </div>
                            <div class="comment-main "  style="display: inline-block; position: relative">
                                <span style="position: relative;top: -30px;">卫生环境</span>
                                <div id="test7" style="position: relative ;left: -80px"></div>
                            </div>
                            <div class="comment-main "  style="display: inline-block;position: relative">
                                <span style="position: relative;top: -30px;" >地理位置</span>
                                <div id="test8" style="position: relative ;left: -80px"></div>
                            </div>
                        </div>
                    </div>
                    <ul class="layui-tab-title">
                        <li class="">全部点评</li>
                    </ul>
                    <ul class="user-reviewBox" style="color: #333333">
                        <li style="width: 1200px;height: 124px">
                            <div class="review-userImg" style="position: relative ;display: inline-block" >
                                <div class="user-name " style="position: relative;left: 50px">小姜姜</div>
                            </div>
                            <div class="review-comment" style="position: relative ;display: inline-block">
                                <div class="review-main" style="position: relative ;left: 250px;top: 15px">
                                    <p style="font-size: 15px">很棒棒</p>
                                </div>
                                <div class="review-userStar" style="position: relative ;display: inline-block;left: 250px;top: 15px">
<%--                                    星级--%>
                                    <div class="test4" style="position: relative ;display: inline-block;"></div>
                                </div>
                                <div class="user-time" style="position: relative ;display: inline-block;left: 270px;font-size: 15px;top: 15px">2020-01-19</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer" style="width: 100%">
        <div class="container " style="width: 100%">
            <div class="box" style="width: 1500px;position: relative;left: -500px">
                <div class="logo"><img src="<%=basePath%>static/picture/logo.png"></div>
                <div class="footer-nav" >
                    <a href="<%=basePath%>join/index.html" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">首页</a>
                    <a href="<%=basePath%>index/aboutus.html" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">关于小姜姜</a>
                    <a href="visu.html" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">我的形象</a>
                    <a href="<%=basePath%>join/index.html" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">合作加盟</a>
                    <a href="<%=basePath%>join/index.html" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">新闻动态</a>
                    <a href="<%=basePath%>BookList" target="_blank" class="nav-item" style="position:relative;padding: 0px 50px 0px 50px">预订酒店</a>
                </div>
            </div>
            <div class="ewm-wrap lg-hide box "style="width: 1500px;position: relative;left: -500px;top: -50px" >
                <img class="public-ewm" src="<%=basePath%>static/images/wx.png" style="width: 100px;height: 100px"/>
                <p class="txt" style="color: #333333">长按识别二维码，关注小姜姜</p>
            </div>
            <p class="copyright" style="position: relative;top: -120px;color: #333333">
                Copyright &copy; 2020 - 2020 小意精品酒店（湖南涉外经济学院） <a href="http://www.baidu.com" target="_blank">湘ICP备20201119号</a>
            </p>
        </div>
    </footer>
</div>

<!-- 条目中可以是任意内容，如：<img src=""> -->

<script src="<%=basePath%>page/layui/layui.js"></script>

<script>
    layui.use(['carousel', 'laydate', 'element','rate','table'], function () {
        var carousel = layui.carousel;
        var laydate = layui.laydate;
        var $ = layui.jquery,
            element = layui.element;
        var rate=layui.rate;
        var table=layui.table;
        //基础效果
        //自定义文本
        rate.render({
            elem: '.test4'
            ,value: 3
            ,text: true
            ,readonly:true
            ,setText: function(value){ //自定义文本的回调
                var arrs = {
                    '1': '极差'
                    ,'2': '差'
                    ,'3': '中等'
                    ,'4': '好'
                    ,'5': '极好'
                };
                this.span.text(arrs[value] || ( value + "星"));
            }
        })
        rate.render({
            elem: '#test5'
            ,value: 3
            ,text: true
            ,setText: function(value){ //自定义文本的回调
                var arrs = {
                    '1': '极差'
                    ,'2': '差'
                    ,'3': '中等'
                    ,'4': '好'
                    ,'5': '极好'
                };
                this.span.text(arrs[value] || ( value + "星"));
            }
        })
        rate.render({
            elem: '#test6'
            ,value: 3
            ,text: true
            ,setText: function(value){ //自定义文本的回调
                var arrs = {
                    '1': '极差'
                    ,'2': '差'
                    ,'3': '中等'
                    ,'4': '好'
                    ,'5': '极好'
                };
                this.span.text(arrs[value] || ( value + "星"));
            }
        })
        rate.render({
            elem: '#test7'
            ,value: 3
            ,text: true
            ,setText: function(value){ //自定义文本的回调
                var arrs = {
                    '1': '极差'
                    ,'2': '差'
                    ,'3': '中等'
                    ,'4': '好'
                    ,'5': '极好'
                };
                this.span.text(arrs[value] || ( value + "星"));
            }
        })
        rate.render({
            elem: '#test8'
            ,value: 3
            ,text: true
            ,setText: function(value){ //自定义文本的回调
                var arrs = {
                    '1': '极差'
                    ,'2': '差'
                    ,'3': '中等'
                    ,'4': '好'
                    ,'5': '极好'
                };
                this.span.text(arrs[value] || ( value + "星"));
            }
        })
        //建造实例
        carousel.render({
            elem: '#test1', width: '350px' //设置容器宽度
            , height: '250px'//设置容器高度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
        //常规用法
        laydate.render({
            elem: '#test1-1',
            value: new Date(new Date().setDate(new Date().getDate() + 1)),
            done: function (value, date) {
                getTime();
            },min:0
        });
        laydate.render({
            elem: '#test1-2',
            value: new Date()
        });
        $(function () {
            var table_Room='';
            <c:forEach items="${list}" var="a">
            table_Room+='\n' +'    <li class="room-box ng-scope" style="position:relative;left:35px" >\n' +
                '            <table  class="room-table" width="1140px" cellpadding="0px" cellspacing="0px" lay-filter="test">\n' +
                '            <tbody style="position: relative"><tr class="table-content" style="background: white" >'+
                '                        <td width="245px" >\n' +
                '                            <table cellpadding="0px" cellspacing="0" >\n' +
                '                                <tbody>\n' +
                '                                <tr>\n' +
                '                                   <td>\n' +
                '                                        <div class="room-photo">\n' +
                '                                            <div class="pic" style="padding:20px 35px">\n' +
                '                                                <img src="<%=basePath%>${a.rimg.split("\\\\")[2]}" width="190px" height="142px">\n' +
                '                                            </div>\n' +
                '                                            <div class="room-photo-section"\n' +
                '                                                 style="display: inline-block;padding: 10px 25px">\n' +
                '                                                <span class="ng-binding" style="font-size: 15px;color:#333333" class="rtname">${a.rtname}</span>\n' +
                '                                            </div>\n' +
                '                                            <div class="room-photo-detail"\n' +
                '                                                 style="display: inline-block;padding: 0px 20px">\n' +
                '                                                <a class="ng-binding" style="font-size: 13px">详情</a>\n' +
                '                                            </div>\n' +
                '                                        </div>\n' +
                '                                    </td>\n' +
                '                                </tr>\n' +
                '                                </tbody>\n' +
                '                            </table>\n' +
                '                        </td>\n' +
                '                        <td>\n' +
                '                            <div class="room-detail" style="left: -30px">\n' +
                '                                <table width="100%" cellspacing="0" cellpadding="0" >\n' +
                '                                    <tbody >\n' +
                '                                    <tr >\n' +
                '                                        <td width="200px">\n' +
                '                                            <p style="font-size: 15px;color:#333333">官方享受价<i class="layui-icon" style="font-size: 18px;color:red">&#xe627;</i></p>\n' +
                '                                        </td>\n' +
                '                                        <td style="width: 128px">\n' +
                '                                            <p style="font-size: 15px;color:#333333">不含早</p>\n' +
                '                                        </td>\n' +
                '                                        <td class="policy" style="width: 128px">\n' +
                '                                            <p style="font-size: 15px;color:#333333" >限时取消</p>\n' +
                '                                        </td>\n' +
                '                                        <td width="120px">\n' +
                '                                            <p style="position: relative;left:20px;font-size: 15px;color:#333333"><i class="layui-icon" style="font-size: 25px;color:#333333">&#xe770;</i>X2</p>\n' +
                '                                        </td>\n' +
                '                                        <td width="200px">\n' +
                '                                            <p  ><i class="layui-icon"style="font-size: 20px">&#xe65e;</i><span class="rtprice" style="font-size: 25px;color: #ff0000">${a.rtprice}</span></p>\n' +
                '                                        </td>\n' +
                '                                        <td>\n' +
                '                                            <div class="room-link" style="padding: 0px -100px">\n' +
                '                                                <a class="layui-btn layui-btn-warm" href="javascript:void(0)" onclick="Reservarion(${a.id})" style="color:#ffffff"> 立即预定</a>\n' +
                '                                            </div>\n' +
                '                                        </td>\n' +
                '                                    </tr>\n' +
                '                                    </tbody>\n' +
                '                                </table>\n' +
                '                            </div>\n' +
                '                        </td>\n' +
                '</tr>            </tbody>\n' +
                '            </table>\n' +

                '            </li><br>'
            </c:forEach>
            $("#table-Room").html(table_Room);
        })

    });

</script>
<script src="<%=basePath%>static/js/jquery.min.js"></script>
<script type="text/javascript">
    function getTime() {
        //获取时间
        var test1 = $("#test1-2").val();
        var test2 = $("#test1-1").val();
        if (test2==""){
            return;

        }
        var t1 = test1.split("-");
        var t2 = test2.split("-");

        if(t2[1]>t1[1]){
           t2[2]=parseInt(t2[2])+parseInt(t1[2]);
        }
        var t = t2[2] - t1[2];
        $("#howTime").text("共" + t + "晚");

    }
    var index=0;
    function Reservarion(index) {
        //获取时间
        var test1 = $("#test1-2").val();
        var test2 = $("#test1-1").val();
        //获取当前被选择的id
        // alert(index)
        location.href="<%=basePath%>user/loginBook?id="+index+"&startTime="+test1+"&endTime="+test2;
        //房间名称
    }
</script>
</body>
<script src="<%=basePath%>static/js/lazysizes.min.js"></script>
<script src="<%=basePath%>static/js/slick.js"></script>
<script src="<%=basePath%>static/js/jquery.appear.js"></script>
<script src="<%=basePath%>static/js/wow.min.js"></script>
<script src="<%=basePath%>static/js/countup.min.js"></script>
<script src="<%=basePath%>static/js/main.js"></script>
</html>
